<template>
    <div class="up-nly-ideo main-color">
       <div class="limit">
            <div class="video-header">
                <h2>上传单一视频</h2>
            </div>
            <div class="audit-status" v-if="videoId != 0">
                <span>审核失败</span>
                <span>（内容太过血腥暴力巴拉巴拉巴拉）</span>
                <span>上传时间</span>
            </div>
            <el-form :model="videoData" label-width="100px">
                <file-image class="file-image-style" :covername="moduleName" :init="videoData.courseVideoUrl" v-on:setImageUrl="getImage"></file-image>
                <el-form-item label="活动名称：">
                    <el-input placeholder="请输入视频的名称" v-model="videoData.courseName"></el-input>
                </el-form-item>
               
                <el-form-item label="类目：">
                    <el-cascader
                        expand-trigger="hover"
                        :options="typeList"
                        v-model="VideoSubject"
                        @change="handleChange">
                    </el-cascader> 
                </el-form-item>
                <el-form-item label="是否收费：">
                    <el-radio-group v-model="videoData.status" size="medium">
                        <el-radio border label="收费"></el-radio>
                        <el-radio border label="免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="astrict" v-if="videoData.status == '收费'">
                    <div class="clear-fix">
                        <div>
                            <input type="text" placeholder="请输入价钱" v-model="videoData.money">
                            <span>元</span>
                        </div>
                        <div>
                            <input type="text" placeholder="请输入时间" v-model="videoData.tryTime">
                            <span>分钟</span>
                        </div>
                    </div>
                    <p>试看时间依据上课总时间合理设置。例：课程30分钟讲完，可以设置试看为10分钟，不填写或填写为0表示没有试看。</p>
                </div>
                <el-form-item class="video-abstract" label="视频简介：" prop="courseVideoContent">
                    <el-input type="textarea" placeholder="请填写您在职的学校或机构" v-model="videoData.courseVideoContent"></el-input>
                </el-form-item>
            </el-form>
            <!-- 视频上传 -->
            <div class="up-video clear-fix">
                <div class="up-video-name">添加视频：</div>
                <div class="up-video-entrance">
                    <input type="file" title=" " ref="video" @change="schedule=false" accept="video/mp4,video/flv">
                    <img src="../../assets/添加视频.png" alt="">
                    <img v-show="!schedule" class="up-images" src="../../assets/正在上传中....png" alt="">
                    <video v-show="isVideo" :src="videoData.courseVideoPath" ref="videoDom"></video>
                </div>
                <div class="up-video-content">
                    <div>
                        <input type="text" v-model="videoName" placeholder="请输入章节名称">
                        <input  @click="upVideo" type="button" value="保存">
                    </div>
                    <div>
                        <span v-show="schedule">页面展示：“第三节”</span>
                        <div v-show="!schedule">
                            <span>
                                <span class="progress-bar"></span>
                            </span>
                            <span>{{Math.floor(progress.loaded/1024/1024*10)/10}}MB/{{Math.floor(progress.size/1000000*10)/10}}MB</span>
                            <span>{{Math.floor(progress.loaded/1024*10)/10}}kb/s</span>
                            <span>{{utils.progressTime(progressTime)}}</span>
                        </div>
                        <input type="button" value="删除" @click="videoDelete">
                    </div>
                </div>
                <p>视频为flv或mp4格式。小于500M</p>
            </div>
            <div class="submit">
                <button @click="upOnlyVideo">提交</button>
            </div>
       </div>
    </div>
</template>

<script>
// import '../../utils/upload.js'
import fileImage from '../sub_components/file_image'
export default {
    data() {
        return {
            moduleName: '视频封面：',
            schedule: true, //进度
            typeList: [], //类目
            VideoSubject: [], //选中类目
            videoData: {
                courseVideoUrl: '',
                courseName: '',
                courseVideoContent: '',
                courseVideoPath: '',
                courseTime: '',
                courseVideoName: '分级课程名称',
                courseType: 0, //单一传0，系列传1
                status: '免费', //0可以试看，1不可以
                priority: 1,
                money: null,
                subjectLevel: '', //类目
                tryNumber: 1, //试看类目级
                tryTime: null,
                videoContent: '课程大纲' //课程大纲
            },
            changeVideo: false,
            token: '',
            // 视频名字
            videoName: '',
            // 视频进度
            progress: {
                loaded: '',
                percent: '',
                size: ''
            },
            progressTime: 0, //上传视频所花时间
            isVideo: false, //视频标签
            videoId: this.$route.params.videoId //视频id
        }
    },
    components: {
        fileImage
    },
    created() {
        this.utils.$get(this.utils.GET_QINIU_TOKEN, res => {
            this.token = res.data
        })
        // 获取类目
        this.utils.$get(this.utils.GET_TYPE_LIST, res => {
            let typeLists = res.data || []
            for (let i = 0; i < typeLists.length; i++) {
                this.typeList[i] = {}
                this.typeList[i].value = typeLists[i].firstTabCate[0].name
                this.typeList[i].label = typeLists[i].firstTabCate[0].name
                this.typeList[i].children = []
                for (
                    let j = 0;
                    j < typeLists[i].firstTabCate[0].groupList.length;
                    j++
                ) {
                    this.typeList[i].children[j] = {}
                    this.typeList[i].children[j].value =
                        typeLists[i].firstTabCate[0].groupList[j].name
                    this.typeList[i].children[j].label =
                        typeLists[i].firstTabCate[0].groupList[j].name
                }
            }
        })
        // 当处于编辑页面获取列表
        let id = this.$route.params.videoId
        if (id == 0) {
            // 初始化
            this.videoData = {
                courseVideoUrl: '',
                courseName: '',
                courseVideoContent: '',
                courseVideoPath: '',
                courseTime: '',
                courseVideoName: '分级课程名称',
                courseType: 0, //单一传0，系列传1
                status: '免费', //0可以试看，1不可以
                priority: 1,
                money: null,
                subjectLevel: '', //类目
                tryNumber: 1, //试看类目级
                tryTime: null,
                videoContent: '课程大纲' //课程大纲
            }
        } else {
            // 获取单一视频
            this.utils.$get(
                this.utils.GET_VIDEO_DETAILS,
                res => {
                    this.videoData = {
                        courseVideoUrl:
                            res.data.courseVideoList[0].courseVideoUrl,
                        courseName: res.data.courseVideoList[0].courseName,
                        courseVideoContent:
                            res.data.courseVideoList[0].courseVideoContent,
                        courseVideoPath:
                            res.data.courseVideoList[0].courseVideoPath,
                        courseTime: res.data.courseVideoList[0].courseTime,
                        courseVideoName:
                            res.data.courseVideoList[0].courseVideoName,
                        courseType: res.data.courseVideoList[0].courseType, //单一传0，系列传1
                        status:
                            res.data.courseVideoList[0].status == 0
                                ? '免费'
                                : '收费', //0可以试看，1不可以
                        priority: res.data.courseVideoList[0].priority,
                        money: res.data.courseVideoList[0].money,
                        subjectLevel: res.data.courseVideoList[0].subjectLevel, //类目
                        tryNumber: res.data.courseVideoList[0].tryNumber, //试看类目级
                        tryTime: res.data.courseVideoList[0].tryTime,
                        videoContent: res.data.courseVideoList[0].videoContent //课程大纲
                    }
                    if (this.videoData.subjectLevel) {
                        this.VideoSubject = this.videoData.subjectLevel.split(
                            '-'
                        )
                    }
                    this.isVideo = true
                },
                { id: this.$route.params.videoId }
            )
        }
        // var config = {
        //     useCdnDomain: true,
        //     region: 'http://qn.1sedu.com'
        // };
        // qiniu.getUploadUrl(config)
    },
    methods: {
        // 清空或删除视频
        videoDelete() {
            this.videoName = ''
            this.isVideo = false
            this.changeVideo = true
            this.schedule = true
        },
        // 当前选中的状态
        handleChange(value) {},
        // 获取图片url
        getImage(url, file) {
            this.videoData.courseVideoUrl = url
            console.log(this.videoData.courseVideoUrl)
        },
        // 上传视频
        upVideo() {
            if (!this.videoName) {
                return this.$message.error('请添加视频名称')
            }
            let videoFile = this.$refs.video.files[0]
            if (!videoFile) {
                return this.$message.error('请添加视频')
            }
            this.videoData.courseVideoName = this.videoName
            console.log(videoFile, 56656565)
            let option = {
                file: videoFile, //上传文件
                key: 'hahaha', //上传名称
                token: this.token, //上传token
                domain: 'http://qn.1sedu.com', //上传地址
                putExtra: {
                    fnmae: videoFile.name, //原文件名
                    mimeType: ['video/mp4', 'video/flv'] //限定格式
                },
                config: {
                    useCdnDomain: false, //是否开启海外加速
                    region: qiniu.region.z2 //上传服务器区域
                }
            }
            // 上传配置
            var observable = qiniu.upload(
                option.file,
                option.key,
                option.token,
                option.putExtra,
                option.config
            )
            let _this = this
            var subscription = observable.subscribe({
                // 上传中
                next(res) {
                    _this.progressTime++
                    _this.progress = res.total

                    _this.$nextTick(() => {
                        document.querySelector('.progress-bar').style.width =
                            res.total.percent + '%'
                    })
                },
                // 上传失败
                error(err) {
                    if (err.code == 614) {
                        _this.$message.error('该视频已上传')
                        return
                    }
                    _this.$message.error('上传失败')
                },
                // 上传成功
                complete(res) {
                    let urlName = res.hash
                    _this.isVideo = true
                    _this.$set(
                        _this.videoData,
                        'courseVideoPath',
                        'http://qn.1sedu.com/' + urlName
                    )
                    let getVideoTime = setInterval(() => {
                        _this.videoData.courseTime = document.querySelector(
                            'video'
                        ).duration
                        if (_this.videoData.courseTime > 0) {
                            _this.videoData.courseTime =
                                _this.videoData.courseTime * 1000
                            clearInterval(getVideoTime)
                        }
                    }, 50)
                }
            }) // 上传开始
        },
        // 上传单一视频数据给后台
        upOnlyVideo() {
            if (!this.videoData.courseVideoUrl) {
                return this.$message.error('请上传封面')
            }
            if (
                this.videoData.courseName.length < 2 ||
                this.videoData.courseName.length > 25
            ) {
                return this.$message.error('请输入正确的标题')
            }
            if (!this.videoData.courseVideoContent) {
                return this.$message.error('请输入正确的内容')
            }
            if (!this.videoData.courseVideoPath) {
                return this.$message.error('请上传视频')
            }
            if (this.videoData.status) {
                this.videoData.status = this.videoData.status == '免费' ? 0 : 1
                if (this.videoData.status == 1 && this.videoData.money) {
                    if (
                        !/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(
                            this.videoData.money
                        )
                    ) {
                        return this.$message.error('请输入正确的金额')
                    }
                }
                if (this.videoData.status == 1) {
                    if (!/^\d/.test(this.videoData.money)) {
                        return this.$message.error('请输入正确的时间')
                    }
                }
            }
            if (!this.VideoSubject.length) {
                return this.$message.error('请选择类目')
            } else {
                this.videoData.subjectLevel =
                    this.VideoSubject[0] + '-' + this.VideoSubject[1]
            }
            // 当id为0的时候未添加，反之修改
            if (this.videoId == 0) {
                this.utils.$post(
                    this.utils.ADD_COURE_VIDEO,
                    res => {
                        console.log(res.data)
                    },
                    this.videoData
                )
            } else {
                this.videoData.id = this.videoId
                this.videoData.liId = null
                this.utils.$post(
                    this.utils.SET_COURE_VIDEO,
                    res => {
                        console.log(res.data)
                    },
                    this.videoData
                )
            }
        }
    }
}
</script>

<style lang="less">
.up-nly-ideo {
    .limit {
        max-width: 900px;
        padding: 0 20px;
        .video-header {
            margin-top: 20px;
            h2 {
                display: inline-block;
                text-align: left;
                padding: 10px 3px;
                font-weight: 600;
                border-bottom: 3px solid #399bff;
            }
        }
        .audit-status {
            height: 60px;
            line-height: 60px;
            background-color: #f6f6f6;
            padding: 0 20px;
            margin-top: 30px;
            > span {
                font-size: 14px;
                &:first-child {
                    font-size: 20px;
                    font-weight: 600;
                }
                &:last-child {
                    float: right;
                    color: #666;
                }
            }
        }
        .file-image-style {
            margin-top: 60px;
        }
        .el-form-item {
            margin-top: 40px;
            height: 40px;
            .el-input__inner {
                border-radius: 0;
            }
        }
        .el-select {
            width: 400px;
        }
        .el-form-item__content {
            height: 40px;
            .el-radio.is-bordered.is-checked {
                border: none;
                background-color: #399bff;
            }
            .el-radio__input.is-checked + .el-radio__label {
                color: #fff;
            }
            .el-radio {
                &:last-child {
                    margin-left: 30px;
                }
            }
            .el-radio-group {
                .el-radio__input {
                    display: none;
                }
                .el-radio__original {
                    display: none;
                }
            }
        }
        .el-textarea {
            .el-textarea__inner {
                height: 300px;
            }
        }
        .video-abstract {
            height: 300px;
        }
        /* 上传视频样式 */
        .up-video {
            margin-top: 40px;
            > div {
                float: left;
            }
            .up-video-name {
                color: #606266;
            }
            .up-video-entrance {
                position: relative;
                width: 160px;
                height: 106px;
                margin-left: 20px;
                > input {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 999;
                    opacity: 0;
                    width: 100%;
                    height: 100%;
                }
                > img,
                video {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .up-images {
                    z-index: 111;
                }
                > video {
                    z-index: 112;
                }
            }
            .up-video-content {
                margin-left: 20px;
                > div {
                    &:first-child {
                        margin-top: 10px;
                        > input {
                            height: 37px;
                            &:first-child {
                                width: 470px;
                                border: 1px solid #ccc;
                                padding-left: 10px;
                            }
                            &:last-child {
                                width: 80px;
                                margin-left: 20px;
                                height: 34px;
                                background-color: #399bff;
                                border-radius: 17px;
                                color: #fff;
                                font-size: 14px;
                            }
                        }
                    }
                    &:last-child {
                        margin-top: 35px;
                        color: #ccc;
                        font-size: 14px;
                        > div {
                            margin-top: -15px;
                            display: inline-block;
                            width: 470px;
                            > span {
                                &:first-child {
                                    width: 100%;
                                    display: inline-block;
                                    height: 10px;
                                    border-radius: 5px;
                                    background-color: #f6f6f6;
                                    > span {
                                        display: block;
                                        width: 0%;
                                        height: 100%;
                                        border-radius: 5px;
                                        background: linear-gradient(
                                            to right,
                                            #29d9a9,
                                            #399bff
                                        );
                                    }
                                }
                                &:nth-child(3) {
                                    display: inline-block;
                                    margin-left: 20px;
                                }
                                &:nth-child(4) {
                                    float: right;
                                }
                            }
                        }
                        > input {
                            float: right;
                            margin-top: -25px;
                            background-color: #fff;
                            width: 80px;
                            height: 37px;
                            color: #ccc;
                        }
                    }
                }
            }
            > p {
                float: left;
                width: 100%;
                padding-left: 100px;
                margin-top: 20px;
                font-size: 14px;
                // margin-left: 200px;
                color: #ccc;
            }
        }
        .submit {
            width: 100%;
            padding: 60px 0;
            > button {
                background-color: #399bff;
                color: #fff;
                width: 250px;
                height: 40px;
                border-radius: 20px;
                display: block;
                margin: 0 auto;
            }
        }
        .astrict {
            margin-left: 100px;
            > div {
                height: 40px;
                > div {
                    float: left;
                    width: 300px;
                    border: 1px solid #ccc;
                    height: 40px;
                    > input {
                        display: inline-block;
                        padding-left: 10px;
                        width: 80%;
                        font-size: 14px;
                        line-height: 30px;
                        height: 35px;
                    }
                    > span {
                        display: inline-block;
                        font-size: 14px;
                        line-height: 40px;
                        text-align: center;
                        width: 10%;
                        color: #000;
                    }
                    &:nth-child(2) {
                        margin-left: 20px;
                    }
                }
            }
            > p {
                color: #999;
                height: 30px;
                margin-top: 14px;
                font-size: 14px;
            }
        }
    }
}
</style>


